<template>
    <div>
        <div v-if="tbGoodsList.length">
            <scroll-view scroll-x="true">
                <div style="display: flex;" :style="{width: tbGoodsList.length * 120 + 'px'}">
                    <view class="demo-warter" v-for="(item, index) in tbGoodsList" :key="index"
                          @click="navigateTo(`/pages/sub/sub1-tabs/tabs/goods-seckill/index?seckillGoodsTitle=${seckillGoodsTitle}`)">
                        <!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
                        <u-lazy-load threshold="-450" border-radius="10"
                                     :image="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/static/default-image/goods.jpg'"
                                     :index="index"></u-lazy-load>
                        <view class="demo-title">{{ item.title }}</view>
                        <view class="demo-price">￥{{ item.price | toFixed2}}</view>
                        <view class="demo-tag">
                            <view class="demo-tag-owner" style="margin-left: 20px;" v-if="!item.disabled">{{item.seckillStatusText}}</view>
                            <view class="demo-tag-text" style="margin-left: 20px;" v-if="item.disabled">{{item.seckillStatusText}}</view>
                            <!--<view class="demo-tag-text">放心购</view>-->
                        </view>
                    </view>
                </div>
            </scroll-view>
        </div>

        <div style="padding-top: 50px; padding-bottom: 50px; text-align: center;" v-if="!tbGoodsList.length">
            没有秒杀商品
        </div>
    </div>
</template>

<script>

    import {TbSeckillGoodsService} from "../../../dev/services/tb-seckill-goods.service";

    export default {
        props: ['seckillGoodsTitle'],
        data: function () {
            return {
                tbGoodsList: [],
            }
        },
        components: {},
        mounted() {
            this.doInfinite();
        },
        methods: {
            doInfinite() {
                const _self = this;
                /**
                 * 查找最近20条秒杀商品即可
                 */
                new TbSeckillGoodsService().findTableListByConsumer({
                    pagination: _self.pagination,
                    data: {
                        communityId: _self.globalVariable.userInfo.tbCommunity.id,
                        orderBy: 'showorder asc'
                    }
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    _self.tbGoodsList = [..._self.tbGoodsList, ...result.list];
                    _self.updateSeckillStatus(_self.tbGoodsList);
                })
            },
            updateSeckillStatus(tbGoodsList) {
                const _self = this;
                console.log(tbGoodsList);
                tbGoodsList.forEach((item, index) => {
                    if (new Date().getTime() < new Date(item.startTime).getTime()) {
                        item.disabled = true;
                        item.seckillStatusText = '未开始';
                        item.countDown = new Date(item.startTime).getTime() / 1000 - new Date().getTime() / 1000;
                        item.countDownEnd = false;  // 是否结束倒计时
                    } else if (new Date().getTime() > new Date(item.endTime).getTime()) {
                        item.disabled = true;
                        item.seckillStatusText = '已结束';
                        item.countDownEnd = true;
                    } else {
                        item.disabled = false;
                        item.seckillStatusText = '立即秒杀';
                        item.countDown = new Date(item.endTime).getTime() / 1000 - new Date().getTime() / 1000;
                        item.countDownEnd = false;
                    }
                });
                _self.$forceUpdate();
            },
        }
        ,
    }
</script>

<style lang="scss" scoped>
    @import "./seckill-goods-module.scss";
</style>
